<template>
  <div id="Songlistinformation">
    <div class="container">
      <div class="header">
        <span class="bobafont bobamusic-prev" @click="$router.back(-1)"></span>
        <p>歌单</p>
      </div>
      <div class="songinformation">
        <div class="songpicture">
          <img :src="Detail.picUrl+'?param=100y100'" width="100%" height="100%">
        </div>
        <div class="songmessage">
          <div class="songsinglename">
            <p>{{Detail.name}}</p>
          </div>
          <div class="creator"><p>{{Detail.creator.nickname}}</p></div>
        </div>
      </div>
      <div class="navigationbar">
        <div><span class="bobafont bobamusic-shoucang1"></span>{{(Detail.subscribedCount / 10000).toFixed(1) }}万</div>
        <b></b>
        <div><span class="bobafont bobamusic-xiaoxi"></span>{{(Detail.commentCount/ 10000).toFixed(1) }}万</div>
        <b></b>
        <div><span class="bobafont bobamusic-iconfontzhizuobiaozhun20"></span>{{(Detail.shareCount/ 10000).toFixed(1) }}万</div>
      </div>
      <div class="songlist">
        <div class="songplaymusic">
          <span class="bobafont bobamusic-icon" @click="playAll"><p>播放全部</p></span>
        </div>
        <div class="songmusic">
          <div class="songmusiclist" v-for="(item,index) in musicList" :key="index"  @click="playMusic(item)">
              <div class="songmusicindex"><p>{{index+1}}</p></div>
              <div class="songinformationlist">
                <div>{{item.name}}</div>
                <div>{{item.ar[0].name}}</div>
              </div>
              <div class="songicon">
                <span class="bobafont bobamusic-gengduo"></span>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {PlayListDetail} from "network/api/RecommendApi";
export default {
  data() {
    return {
      Detail:{},
      musicList:[]
    };
  },
  mounted(){
    this.Detail=this.$route.params.item
    if (this.Detail == null) {
      console.log(sessionStorage.getItem("Detail"));
      //转化成JSON字符传
      this.Detail = JSON.parse(sessionStorage.getItem('Detail'));
    }else{
      //用sessionStorage 存储数据
      sessionStorage.setItem("Detail", JSON.stringify(this.Detail));
    }
    PlayListDetail(this.Detail.id).then((res) => {
     this.musicList= res.data.playlist.tracks
     console.log(res);
   })
  },
  methods:{
    playMusic(item){
      console.log(item);
      this.$store.commit("setCurrentMusicId",item.id)
      this.$store.commit("setLoading",true)
    },
    playAll() {
      console.log("fdsf");
      // 添加到播放列表//并且播放第一首歌
      this.$store.commit("setMusicList", this.musicList);
      this.$store.commit(
        "setCurrentMusicId",
        this.$store.state.musicList[0].id
      );
      this.$store.commit("setLoading", true);
    },
  }
};
</script>

<style>
#Songlistinformation .container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 2;
}
#Songlistinformation .container .header {
  width: 100%;
  height: 50px;
  background: #acf6ef;
  display: flex;
}
#Songlistinformation .container .header .bobafont {
  color: #fff;
  font-size: 27px;
  line-height: 50px;
  margin-left: 10px;
}
#Songlistinformation .container .header p {
  color: #fff;
  font-size: 19px;
  margin-top: 16px;
  margin-left: 10px;
}
#Songlistinformation .container .songinformation {
  width: 100%;
  height: 25%;
  background-image: linear-gradient(#acf6ef, #d1faf6);
  display: flex;
}
#Songlistinformation .container .songinformation .songpicture {
  border-radius: 10px;
  width: 30%;
  height: 65%;
  /* background: green; */
  margin-top: 20px;
  margin-left: 10px;
}
#Songlistinformation .container .songinformation .songpicture img{
  border-radius: 10px;
}
#Songlistinformation .container .songinformation .songmessage {
  width: 59%;
  height: 65%;
  margin-top: 20px;
  margin-left: 20px;
}
#Songlistinformation .container .songinformation .songmessage .songsinglename {
  word-break: break-all;
  width: 100%;
  color: #2ae0c8;
}
#Songlistinformation .container .songinformation .songmessage .creator {
  width: 100%;
  color: #67ada4;
  font-size: 13px;
}
#Songlistinformation .container .navigationbar {
  position: relative;
  width: 70%;
  height: 7%;
  margin: 0 auto;
  margin-top: -20px;
  background: #82fcec;
  border-radius: 25px;
  display: flex;
  justify-content: space-evenly;
}
#Songlistinformation .container .navigationbar div {
  font-size: 13px;
  display: flex;
  width: 28%;
  height: 65%;
  margin-top: 18px;
  color: #fff;
  display: flex;
}
#Songlistinformation .container .navigationbar div .bobafont {
  font-size: 23px;
  line-height: 11px;
  color: #fff;
}
#Songlistinformation .container .navigationbar b {
  width: 1px;
  opacity: 0.5;
  height: 60%;
  background: #fff;
  margin-top: 10px;
}
#Songlistinformation .container .songlist {
  margin-top: -26px;
  width: 100%;
  height: 67.4%;
  background: #e5faf8;
  display: flex;
  flex-direction: column;
}
#Songlistinformation .container .songlist .songplaymusic {
  width: 94.5%;
  height: 7%;
  margin-top: 10px;
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
}
#Songlistinformation .container .songlist .bobafont {
  line-height: 35px;
  font-size: 20px;
  color:#2ae0c8;
}
#Songlistinformation .container .songlist .bobafont p {
  color: #2ae0c8;
  font-size: 18px;
  margin-left: 30px;
  margin-top: -35px;
}
#Songlistinformation .container .songlist .songmusic {
  width: 94.5%;
  height: 90%;
  margin: 0 auto;
  overflow: auto;
}
#Songlistinformation .container .songlist .songmusic .songmusiclist{
  width: 100%;
  height: 12%;
  display: flex;
  margin-top: 10px;
}

#Songlistinformation .container .songlist .songmusic .songmusiclist .songmusicindex{
  width: 5%;
}
#Songlistinformation .container .songlist .songmusic .songmusiclist .songmusicindex p{
  color: rgb(211, 205, 205);
  font-size: 20px;
  line-height: 10px;
} 
#Songlistinformation .container .songlist .songmusic .songmusiclist .songinformationlist{
  width: 78%;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: #2ae0c8;
}
#Songlistinformation .container .songlist .songmusic .songmusiclist .songinformationlist div:nth-child(2){
  font-size: 10px;
  color: #67ada4;
}
#Songlistinformation .container .songlist .songmusic .songmusiclist .songicon{
  width: 10%;
  margin-left: 15px;
  display: flex;
}
#Songlistinformation .container .songlist .songmusic .songmusiclist .songicon .bobafont{
  font-size: 25px;
  transform: rotate(90deg);
}
</style>